<template>
	<view class="content">
		<button class="avatar-wrapper" @chooseavatar="photoChoose" open-type="chooseAvatar"
			bind:chooseavatar="onChooseAvatar">
			<image :src="form.faceUrl" class="img" />
		</button>
		<view class="textarea-content">
			<view class='textarea-item'>
				<view class="text">昵&nbsp &nbsp &nbsp &nbsp称</view>
				<input class="title" v-model="form.notName" placeholder="请输入昵称" />
			</view>
			<view class='textarea-item'>
				<view class="text">个性签名</view>
				<input class="title" v-model="form.introduce" placeholder="编辑你的个性签名" />
			</view>
		</view>
		<button class="submitBtn" @click="submit">保存</button>
	</view>
</template>

<script>
	import {
		getCustomerApi,
		submitUserInfo
	} from '@/api/customer.js';
	import {
		postUpdateCustome
	} from '@/api/mine.js';
	export default {
		data() {
			return {
				form: {
					faceUrl: '',
					notName: '',
					introduce: '',
				}
			}
		},
		methods: {
			getCustomer() {
				getCustomerApi().then((res) => {
					if (res.code == 1) {
						console.log(res.data)
						this.form = res.data;
					} else {
						console.log(res)
					}
				}).catch((res) => {
					console.log(res)
				})
			},
			getList() {
				postUpdateCustome({
					notName: this.form.notName,
					faceUrl: this.form.faceUrl,
					introduce: this.form.introduce
				}).then((res) => {
					if (res.code == 1) {
						uni.showToast({
							title: '修改成功',
							mask: true,
						})

					} else {
						uni.showToast({
							title: '加载失败',
							mask: true,
						})
					}
				}).catch((res) => {
					uni.hideLoading();
					uni.showToast({
						title: '加载失败',
						mask: true,
					})
				})
			},
			photoChoose(e) {
				const filePath = e.detail.avatarUrl;
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.uploadFile({
					url: 'https://ysz.gshwsc.com/upload?uploadType=2', //post请求的地址
					filePath,
					header: {
						"Content-Type": "multipart/form-data"
					},
					formData: {
						uploadType: 2
					},
					name: 'file',
					success: (res) => {
						const data = JSON.parse(res.data);
						uni.hideLoading()
						console.log(data)
						if (data.code == 1) {
							this.utils.showToast('上传成功')
							this.form.faceUrl = data.imgURL
						} else {
							this.utils.showToast(data.msg)
						}
					},
					fail: (res) => {
						uni.hideLoading()
						this.utils.showToast('上传失败');
					}
				})
			},
			submit() {
				this.getList()
				uni.switchTab({
					url: '/pages/mine/index'
				})
			}
		},
		onLoad() {
			this.getCustomer();
			const defaultAvatarUrl =
				'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 30rpx;

		.avatar-wrapper {
			width: 150rpx;
			height: 150rpx;
			padding-left: 0;
			padding-right: 0;

			.img {
				width: 100%;
				height: 100%;


			}
		}



		.textarea-content {
			margin-top: 60rpx;

			.textarea-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				border-top: 3rpx solid #efefef;
				height: 80rpx;
				border-bottom: 3rpx solid #efefef;

				.text {
					display: flex;
				}

				.title {
					display: flex;
					text-align: center;
				}
			}

			.textarea-item:last-child {
				border-top: none;
			}
		}

		.submitBtn {
			width: 300rpx;
			height: 60rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			background: $color-primary;
			color: #fff;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>